<template>
	<view class="content">
		<view class="banner">
			<view class="contenta">
				<view class="one">
					<view class="search" @click="homesearch">
						<view class="button">
							<image src="../../static/306.png" mode=""></image>
						</view>
						<input class="input" type="text" placeholder='请输入搜索内容' style="font-size: 24rpx;" v-model="title"
							@blur="coursepagea" />
					</view>
				</view>
				<view class="information">
					<view class="commodity">
						<view class="kong" v-if="indexlist.length == []">
							<image src="../../static/389.png" mode=""></image>
						</view>
						<view class=" list" @click="toshopinfos(item,item.id)" v-for="(item,index) in indexlist"
							:key="index" v-else>
							<view class="img">
								<image :src="item.cover" mode=""></image>
							</view>
							<view class="text">
								<view class="name">
									<text>{{item.title}}</text>
								</view>
								<view class="introduce">
									{{item.chapterDetail}}
								</view>
								<view class="low">
									<view class="theheart">
										<image v-if="item.isCollect == 1" src="../../static/311.png" mode="">
										</image>
										<image v-if="item.isCollect == 2" src="../../static/313.png" mode="">
										</image>
									</view>
									<view class="money">
										<text>￥</text>
										{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kbai">
		</view>
	</view>
</template>
<script>
	import {
		coursepage, //推荐或者是不推荐
	} from "@/request/api.js"
	export default {
		data() {
			return {
				itemList: [{
					name: '品牌特惠'
				}, {
					name: '甄选好物'
				}],
				selectedIdx: 0,
				banner: [],
				navigationList: [], //一级分类
				indexlist: [],
				alllist: [],
				findByCategorylist: [],
				ids: '',
				type: '',
				pageNo: 1,
				ids: '',
				title: null,
				total: ''
			}
		},
		onReachBottom() {
			console.log(111);
			if (this.total <= this.indexlist.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
			} else {
				this.pageNo++;
				this.coursepagea()
			}
		},
		onLoad(e) {
			this.type = e.type
			if (this.type) {
				this.coursepagea()
			}
			console.log(this.type);
		},
		onShow() {
			// this.indexlist = []
			this.pageNo = 1 //总页数
			// this.getcaidan()
			// this.getIsIndexs()
			// this.brandCategorys()
		},
		methods: {
			toshopinfos(item, id) {
				let isLogin = uni.getStorageSync('token')
				if (!isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500)
					return;
				}
				getApp().globalData.details = item
				uni.navigateTo({
					url: '/pages/details/index?id=' + id
				})
			},
			//商品
			coursepagea() {
				uni.showLoading({
					title: '加载中...'
				})
				let that = this
				console.log(this.type);
				if (that.title) {
					that.indexlist = []
				}
				if (!that.title) {
					that.indexlist = []
				}
				coursepage({
					memberId: uni.getStorageSync('userInfo').id,
					isHot: that.type,
					title: that.title,
					pageNo: that.pageNo,
				}).then(res => {
					console.log(res);
					that.indexlist = that.indexlist.concat(res.result.records)
					that.total = res.result.total; //数据总条数
					uni.hideLoading()
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.information {
		// margin-top: 120rpx;
		// position: absolute;
		// z-index: 1;
		// margin: 0 14rpx;
	}

	.search {
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		background-color: #fff;
		align-items: center;
		border-radius: 50rpx;
		padding-left: 32rpx;
		box-sizing: border-box;

		.in {
			margin-left: 32rpx;
		}
	}

	.topstart {
		// height: var(--status-bar-height);
	}

	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #f7f7f7;
		// padding: 24rpx;
		// box-sizing: border-box;
		// padding-bottom: 50rpx;
	}

	.banner {
		// padding: 0rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 165rpx;
		z-index: 2;
		// height: 480rpx;
		// background-image: url(../../static/1786.png);
		// background-size: cover;
		// background-position: center;
		// background-color: #fafafa;
	}

	.header {
		margin: 0 14rpx;
		position: relative;
		z-index: 1;
		padding-top: 48rpx;
		// text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
		display: flex;

		// justify-content: space-between;
		// margin-top: 108rpx;
		.title {
			margin-right: 100rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.address {
			display: flex;
			align-items: center;

			image {
				width: 38.8rpx;
				height: 32.6rpx;
				margin-right: 8rpx;
			}

			.addressa {
				width: 210rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #390F01;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 设置显示的最大行数 */
					-webkit-box-orient: vertical;
					/* 垂直排列文本内容 */
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.contenta {
		// background-color: #fafafa;
		height: 100%;
	}

	.logo {
		width: 62rpx;
		height: 62rpx;
	}

	.one {
		display: flex;
		align-items: center;
		// margin: 16rpx;
		margin-top: 0;
		background: #fff;
		padding-bottom: 20rpx;
		// padding-top: 50rpx;
	}

	.search {
		width: 100%;
		margin: 0 14rpx;
		// display: flex;
		// justify-content: space-between;
		height: 56rpx;
		background: #f6f6f6;
		// align-items: center;
		border-radius: 50rpx;
		padding-left: 32rpx;
		padding-right: 70rpx;

		.in {
			margin-left: 32rpx;
		}

		.button {
			// text-align: center;
			// line-height: 39.19rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			border-radius: 50rpx;

			// margin-right: 10rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				// margin-right: 15rpx;
			}
		}

		.input {
			width: 90%;
		}
	}

	.broadcast {
		margin: 0 14rpx;
		// width: 100%;
		height: 351rpx;
		border-radius: 16rpx;
		margin-top: 28rpx;

		swiper {
			height: 351rpx;

			swiper-item {
				height: 351rpx;
			}
		}

		image {
			width: 100%;
			border-radius: 20rpx;
			height: 351rpx;
		}
	}

	.lately {
		margin: 0 14rpx;
		// margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
		padding: 0rpx 10rpx 32rpx;
		box-sizing: border-box;

		.views {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.views-a {
				text-align: center;
				margin-top: 32rpx;
				width: 20%;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50rpx;
					margin-bottom: 25rpx;
				}

				.article {
					font-weight: 400;
					font-size: 24rpx;
					color: #282828;
				}
			}
		}
	}

	.product {
		// margin: 24rpx;
		padding: 26rpx 14rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		// background: linear-gradient(180deg, #ff9d3470 0%, #ffffff00 100%);
		.name {
			margin-left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;

			// margin-bottom: 25rpx;
			.goods {
				// border-left: 8rpx solid #FF9C34;
				display: flex;
				align-items: center;

				.cheng {
					width: 8rpx;
					height: 38rpx;
					border-radius: 430rpx;
					background: #ff9c34;
					margin-right: 12rpx;
				}

				image {
					width: 148rpx;
					height: 32rpx;
				}
			}

			.many {
				margin-right: 20rpx;
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.commodity {
			.scroll-view_H {
				// display: flex;
				// justify-content: space-between;
				// flex-wrap: wrap;
				white-space: nowrap;
				width: 100%;

				.list {
					width: 590rpx;
					height: 268rpx;
					// margin-bottom: 50rpx;
					background: #FFF;
					border-radius: 20rpx;
					padding-bottom: 16rpx;
					display: inline-block;
					text-align: center;
					font-size: 36rpx;
					margin-right: 14rpx;

					/* 超出部分显示三个省略号 */
					image {
						width: 590rpx;
						height: 268rpx;
						border-radius: 16rpx;
					}

					.name {
						color: #000000;
						font-size: 28rpx;
						font-weight: 700;
						padding: 0 8rpx;

						// margin: 38rpx 0 26rpx;
						text {
							overflow: hidden;
							/* 确保内容超出容器时会被隐藏 */
							white-space: nowrap;
							/* 确保文本在一行内显示，避免换行 */
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.information {
		// margin: 24rpx;
		padding: 26rpx 14rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding-top: 0;
		// margin-top: 20rpx;
		box-sizing: border-box;

		// background: linear-gradient(180deg, #ff9d3470 0%, #ffffff00 100%);
		.name {
			// margin-left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// margin-bottom: 26rpx;
			// margin-bottom: 25rpx;
			.goods {
				// border-left: 8rpx solid #FF9C34;
				display: flex;
				align-items: center;

				.cheng {
					width: 8rpx;
					height: 38rpx;
					border-radius: 430rpx;
					background: #ff9c34;
					margin-right: 12rpx;
				}

				image {
					width: 148rpx;
					height: 32rpx;
				}
			}

			.many {
				margin-right: 20rpx;
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.commodity {
			margin-top: 20rpx;

			.list {
				height: 216rpx;
				border-radius: 22rpx;
				background: #ffffff;
				display: flex;
				align-items: center;
				padding: 22rpx 26rpx 28rpx 18rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.img {
					width: 328rpx;
					height: 166rpx;

					image {
						width: 328rpx;
						height: 166rpx;
					}
				}

				.text {
					margin-left: 20rpx;

					.name {
						width: 288rpx;
						color: #000000;
						font-size: 28rpx;
						font-weight: 700;

						// margin: 38rpx 0 26rpx;
						text {
							overflow: hidden;
							/* 确保内容超出容器时会被隐藏 */
							white-space: nowrap;
							/* 确保文本在一行内显示，避免换行 */
							text-overflow: ellipsis;
						}
					}

					.introduce {
						color: #3333334d;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 18rpx;
						margin-bottom: 22rpx;
					}

					.low {
						display: flex;
						justify-content: space-between;

						.theheart {
							width: 48rpx;
							height: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.money {
							color: #d73c38;
							font-size: 36rpx;
							font-weight: 500;

							text {
								color: #d73c38;
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}

	.kong {
		width: 100%;
		text-align: center;
		height: 318rpx;

		image {
			width: 332rpx;
			height: 318rpx;
		}
	}
</style>